第 4 步 - 创建Car 页面的状态

在本步骤中，在应用程序中使用Kanzi 状态机从不同角度显示汽车，并动画化这些状态之间的迁移。

创建汽车阴影

在本节中，在 Car页面 (Page) 节点中调整用于汽车阴影的材质。

要创建汽车阴影：

在工程 (Project) 中双击Car 页面 (Page) 节点，在新的预览 (Preview) 选项卡中将其打开。
在汽车模型下有一个平面。这是因为阿尔法混合模式不适合用于渲染阴影纹理的材质。
在工程 (Project) 中选择 Car > 2D 视口 (Viewport 2D) > Car > RootNode > Shadowplane 节点并在属性 (Properties) 中点击组合仪表材质 (Cluster Material) 属性旁的，打开 Shadow 材质的属性。
在Shadow 材质属性 (Properties)中，将混合模式 (Blend Mode) 设为阿尔法: 自动 (Alpha: Automatic)。

创建状态

在本节中，为汽车创建不同的状态，每个状态侧重于汽车的不同部分。在本步骤的下一节中，您可以创建通过点击转到这些状态的 UI 控件。

在 Kanzi 中，状态机是创建丰富的用户界面是最重要的功能之一。

要创建状态：

在工程 (Project) 中选择Car > 2D 视口 (Viewport 2D) > Car > RootNode > Camera_Root 节点。
在状态工具 (State Tools) 窗口点击创建状态机 (Create State Manager)，创建Camera_Root 节点中的状态机。
您可以在预览 (Preview) 窗口下方找到状态工具 (State Tools) 窗口。

Kanzi Studio 会新建状态机，并将其分配到Camera_Root 节点。状态工具 (State Tools)处于活动状态时，预览 (Preview) 选项卡为橙色，您可以使用状态工具 (State Tools) 创建状态。状态工具 (State Tools) 处于活动状态时，Kanzi Studio 跟踪所有的属性值更改，且您可以使用状态工具 (State Tools) 将这些值存储到状态。
在状态工具 (State Tools) 中点击创建状态 (Create State) 创建状态。创建三个状态。
双击每个状态的名称，然后命名状态为Brakes、Roof、Suspension。
在工程 (Project) 中选择Car > 2D 视口 (Viewport 2D) > Car > RootNode > Camera_Root > 摄像机 (Camera) 节点。
在预览 (Preview) 中选择摄像机工具 (Camera tool) 并点击。启用选项时，Kanzi Studio 将自由摄像机的当前位置存储到您在摄像机工具 (Camera tool) 下拉菜单中选择的摄像机 (Camera) 节点。在本案例中，是指您在工程 (Project) 中选择的摄像机 (Camera) 节点。
在工程 (Project) 中选择 Car > 2D 视口 (Viewport 2D) > Car > RootNode > Car节点，并在预览 (Preview) 摄像机工具 (Camera tool)中点击使摄像机更靠近汽车。
在预览 (Preview) 摄像机工具 (Camera tool) 中，使用轨道摄像机设置汽车位置，然后在状态工具 (State Tools) 中点击，将当前值保存到该状态。
例如，您对位置满意时，在状态工具 (State Tools) 的Brakes 状态中点击，将摄像机 (Camera) 节点的当前位置存储到该状态。

轨道摄像机可以让您围绕在工程 (Project) 中选定的节点或在摄像机查看 (Look At) 属性中设置的节点移动。要使用轨道摄像机移动，使用以下控件：

控件	描述 (Description)
点击鼠标左键并拖动。	旋转 (Rotate)
点击鼠标中键并拖动。按下 Space 键，然后点击鼠标左键并拖动。	平移
滚动鼠标滚轮。按下 Shift 和 Alt 键，然后点击鼠标左键并拖动。	缩放

重复上一步，直到为所有状态创建位置。
在预览 (Preview) 中点击进入交互 (Interact) 模式，在状态工具 (State Tools) 中点击各状态查看应用程序处于该状态时的外观。在本案例中，您可以看到场景中汽车显示在您为每个状态定义的位置上。
在状态工具 (State Tools) 中点击编辑状态机 (Edit State Manager) 停用状态工具 (State Tools)。

创建在不同状态之间迁移的控件

在本节中，您可以创建控件，以在上一节中创建的状态之间进行迁移。

要创建在状态之间迁移的控件：

在工程 (Project) 中按下 Alt 并右键点击Car > 2D 视口 (Viewport 2D) 节点，选择2D 堆栈布局 (Stack Layout 2D) 并将其命名为 CarControl。
在工程 (Project) 中选择CarControl 节点，并在属性 (Properties) 中将方向 (Direction) 属性设为Y。
使用方向 (Direction) 属性设置您想让堆栈布局 (Stack Layout) 节点沿着哪个轴排列其子节点。
在预设件 (Prefabs) 中点击并创建2D 按钮 (Button 2D) 预设件，在2D 按钮 (Button 2D) 中创建图像 (Image) 节点。
您可以使用此预设件控制在本步骤的前面部分创建的状态机。
在预设件 (Prefabs) 中选择2D 按钮 (Button 2D) > 图像 (Image) 节点并在属性 (Properties) 中添加和设置：
- 布局宽度 (Layout Width) 和布局高度 (Layout Height) 属性为 100 像素。
- 垂直边距 (Vertical Margin) 属性下对齐 (Bottom) 属性字段为 10。
- 在图像 (Image) 属性旁点击。
  这可让您在工程中为该预设件的每个实例显示不同的图像。
从预设件 (Prefabs) 窗口拖动三个 2D 按钮 (Button 2D) 预设件到工程 (Project) 窗口并将其放在 Car > 2D 视口 (Viewport 2D) > CarControl 节点上。
Kanzi Studio 实例化CarControl 节点中的2D 按钮 (Button 2D) 预设件。
选择各2D 按钮 (Button 2D) 预设件实例，按下 F2 并命名为 Brakes、Roof 和 Suspension。
在工程 (Project) 的 CarControl 节点中选择第一个实例化的2D 按钮 (Button 2D) 预设件：
1. 在属性 (Properties) 中将 FirstApplication.Button2D.Image 属性添加并设置到StateBrakes 图像。
2. 在节点组件 (Node Components) > 触发器 (Triggers) 部分添加按钮: 点击 (Button:Click) 触发器，在添加 (Add) 下拉菜单中选择转到状态 (Go to State) 动作，在动作设置中设置：
  - 项 (Item) 为预设件 (Prefabs)/Car/Car/RootNode/Camera_Root
  - 状态 (State) 为 Camera_Root 状态机 (State Manager)/StateGroup/Brakes
  点击保存 (Save)。
重复上一步骤，设置其余两个 2D 按钮 (Button 2D) 预设件。使用 StateRoof 和 StateSuspension 图像并设置转到状态 (Go to State) 动作，指向状态 Roof 和Suspension。
点击CarControl 节点中的按钮时，Kanzi Studio会使用默认线性迁移，迁移到该状态。您可以使用状态迁移编辑器 (State Transition Editor)调整迁移。请参阅使用状态迁移。

调整按钮位置

在本节中，调整控制汽车状态的按钮的位置。

要调整按钮位置：

点击主菜单下的屏幕 (Screen) 选项卡在预览 (Preview) 中显示整个应用程序。
在页面 (Pages) 中点击Car 页面 (Page) 节点，在预览 (Preview)中使用节点工具 (Node tool) 定位CarControl 节点。
建议
要选择带有节点工具 (Node tool) 的节点，双击要在预览 (Preview) 中选中的节点。

< 上一步

下一步 >

另请参阅

要详细了解有关使用状态机的信息，请参阅使用状态机并完成教程：使用状态机控制您的应用程序。

要详细了解有关使用触发器和动作的信息，请参阅触发器。

要详细了解有关使用预览 (Preview) 摄像机工具 (Camera tool) 的信息，请参阅使用摄像机 (Camera) 节点。